<template>
  <div id="uncheckedList">
    <div class="search">
      <el-select v-model="formData.role"
                 style="width: 200px"
                 placeholder="请选择查询的角色" >
        <el-option
                v-for="item in roleId"
                :key="item"
                :label="item"
                :value="item">
        </el-option>
      </el-select>
      <el-input placeholder="请输入需要查询的学院"
                style="width: 200px"
                v-model="formData.departmentName"/>
      <el-button type="primary" icon="el-icon-search" @click="request">查询</el-button>
      <el-button type="success" icon="el-icon-download" @click="exportExcel">导出</el-button>
      <el-switch
              style="margin-left: 150px"
              v-model="value"
              active-color="#13ce66"
              active-text="过滤已冻结账号"
              inactive-color="#C0C4CC">
      </el-switch>
    </div>
    <el-table
            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            style="width: 100%"
            border
            id="table"
            :row-class-name="tableRowClassName">
      <el-table-column
              prop="userId"
              align="center"
              label="ID"
      ></el-table-column>
      <el-table-column
              prop="roleId"
              align="center"
              label="学号"
      >
      </el-table-column>
      <el-table-column
              align="center"
              prop="name"
              label="姓名"
      >
      </el-table-column>
      <el-table-column
              prop="role"
              align="center"
              label="角色"
      ></el-table-column>
      <el-table-column
              prop="departmentName"
              align="center"
              label="学院"
      ></el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8,11]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import FileSaver from "file-saver";
  import XLSX from "xlsx";
  export default {
    name: "UncheckedList",
    data(){
      return{
        pageSize:11,
        currentPage:1,
        tableData:[],
        allData:[],
        filter:'',
        roleId :['Teacher','Student'],
        formData:{role:'',departmentName:''},
        value:true
      }
    },
    mounted() {
     this.request()
    },
    watch: {
      value:function (val) {
        if(val === false){
          this.tableData = this.allData
        }
        else {
          this.tableData = this.allData.filter(item => {
            return item.isFreeze === 0
          })
        }
      }
    },
    methods:{
      request(){
        console.log(this.formData)
        this.$http.post("/epidemic/admin/getNotReportUserToday",this.formData).then(res =>{
          console.log(res)
          if(res.data.status === 200){
            this.allData = res.data.data
            this.tableData = this.allData.filter(item => {
              return item.isFreeze === 0
            })
          }
        })
      },
      tableRowClassName({row, rowIndex}) {
        let index = (this.currentPage-1)*this.pageSize+rowIndex
        if (this.tableData[index].isFreeze === 1) {
          return 'warning-row';
        }
        return '';
      },
      //分页
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      exportExcel(){
        let store_currentPage = this.currentPage
        let store_pageSize = this.pageSize

        this.pageSize = 10000
        this.currentPage = 1
        this.$nextTick(function () {
          let time = new Date();
          let month = time.getMonth() + 1
          let name = time.getFullYear() + "" + month + "" + time.getDate();
          let wb = XLSX.utils.table_to_book(document.getElementById("table"));
          let wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'});
          try {
            FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), name+'-未打卡名单'+'.xlsx')
          } catch (e) {
            if (typeof console !== 'undefined') console.log(e, wbout)
          }
          this.pageSize = store_pageSize
          this.currentPage = store_currentPage
          return wbout;
        })
      },
    }
  }
</script>

<style scoped>
  /deep/ .el-table .warning-row {
    background-color: #e9e6f8;
  }
  .block{
    margin-top: 5px;
    float: right;
  }
  .search{
    display: inline-block;
    float: left;
  }
</style>